<template>
  <div class="header-section">
    <!-- 时间显示部分 -->
    <el-row class="time-row">
      <el-col :span="24">
        <div class="time-container">
          <span class="time-item">{{ currentDate }}</span>
          <span class="separator">|</span>
          <span class="time-item">{{ currentTime }}</span>
          <span class="separator">|</span>
          <span class="time-item">{{ currentWeekday }}</span>
        </div>
      </el-col>
    </el-row>

    <!-- 导航按钮部分（使用配置文件渲染） -->
    <el-row class="buttons-row">
      <el-col :span="24">
        <ul class="header-content-left-bottom">
          <li v-for="(item, index) in navItems" :key="index" @click="handleClick(item.path, index)"
            :class="['gradient-btn', { 'active': activeIndex === index }]">
            {{ item.name }}
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ElRow, ElCol } from 'element-plus'
import { useRouter } from 'vue-router'
import { leftRouter } from '../config/navConfig' // 引入导航配置文件
import { ref, onMounted, onBeforeUnmount } from 'vue'

const router = useRouter()
const currentDate = ref('')
const currentTime = ref('')
const currentWeekday = ref('')
const timer = ref(null)
const navItems = ref(leftRouter)

// 格式化日期时间
const updateTime = () => {
  const now = new Date()
  // 格式化日期
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-')
  // 格式化时间
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
  // 格式化星期
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  currentWeekday.value = weekdays[now.getDay()]
}

// 处理按钮点击事件
const handleClick = (path, index) => {
  navigateTo(path)
  // 通过事件通知父组件更新激活状态
  emit('update-active', index, 'left')
}

// 路由跳转
const navigateTo = (path) => {
  router.push(path)
}

// 组件挂载时启动定时器
onMounted(() => {
  updateTime()
  timer.value = setInterval(() => updateTime(), 1000)
})

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  clearInterval(timer.value)
})

const props = defineProps({
  activeIndex: {
    type: Number,
    default: -1
  }
})

const emit = defineEmits(['update-active'])
</script>

<style scoped>
.header-section {
  padding: 5px;
  padding-top: 8px
}

.time-row {
  margin-bottom: 18px !important;
}

.time-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  min-height: 22px;
  margin-left: 15px;
}

.time-item {
  width: auto;
  min-width: 12%;
  height: 100%;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #AFD7E9;
  line-height: 22px;
  text-align: center;
  font-style: normal;
}

.separator {
  color: #AFD7E9;
  font-size: 16px;
  line-height: 22px;
}

.buttons-row {
  margin-left: 0 !important;
}

.header-content-left-bottom {
  display: flex;
  gap: 10px;
  margin-left: 15px;
  padding: 0;
  list-style: none;
}

.gradient-btn {
  width: 150px;
  height: 36px;
  background-image: url('@/assets/img/img_header/L-btn.png');
  background-size: 100% 100%;
  color: #AFD7E9;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  transition: transform 0.2s ease;
  cursor: pointer;
}

/* 悬浮状态 */
.gradient-btn:hover {
  transform: translateY(-2px);
  background-image: url('@/assets/img/img_header/L-H-btn.png');
}

/* 激活状态 - 点击后保持显示 */
.gradient-btn.active {
  background-image: url('@/assets/img/img_header/L-H-btn.png');
  transform: translateY(0);
}

/* 激活状态下的悬浮效果保持不变 */
.gradient-btn.active:hover {
  transform: translateY(-2px);
}
</style>